<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .aside {
      position: fixed;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 5px auto auto;
      width: 40px;
      height: 90px;
      /* background: lawngreen; */
      z-index: 9;
    }

    /* 联系我们 */
    .aside .links {
      position: relative;
      padding-top: 1px;
      margin: 2px 0;
      width: 40px;
      height: 39px;
      background: #eeeeee;
      text-align: center;
      line-height: 40px;
      transition: all .3s;
    }

    /* 返回顶部 */
    .aside .goback {
      display: none;
      width: 40px;
      height: 40px;
    }

    .links .icon {
      margin: 11px;
      display: block;
      width: 17px;
      height: 17px;
    }

    .linkUs {
      display: none;
      position: absolute;
      top: -1px;
      left: -210px;
      padding: 10px 0 0 10px;
      width: 200px;
      height: 140px;
      border: 1px solid #ccc;
      z-index: 100;
      background: #fff;
    }

    .guanzhuUS {
      top: -43px;
    }

    /* 鼠标滑过 */
    .links .txt {
      display: none;
    }

    .links:hover .icon {
      display: none;
    }

    .links:hover {
      background: green;
    }

    .links:hover .txt {
      margin: 4px 5px 0 5px;
      display: block;
      font-size: 12px;
      line-height: 16px;
      color: #fff;
    }

    .links:hover .linkUs {
      display: block;
    }


    .header {
      height: 100px;
      background: yellow;
    }

    .nav {
      height: 150px;
      background: red;
    }

    .main {
      padding-top: 1px;
      height: 1200px;
      background: blue;
    }

    .main .focus {
      margin: 20px 0;
      height: 400px;
      background: pink;
    }

    .main .news {
      height: 800px;
      background: orange;
    }

    .fotter {
      height: 300px;
      background: black;
      color: #fff;
    }
  </style>
</head>

<body>
  <!-- 侧边栏 -->
  <div class="aside">
    <div class="links">
      <img class="icon" src="./images/aside1_03.jpg" alt="">
      <span class="txt">联系我们</span>
      <div class="linkUs">
        联系我们广告内容
      </div>
    </div>
    <div class="links guanzhu">
      <img class="icon" src="./images/aside1_03.jpg" alt="">
      <span class="txt">关注微信</span>
      <div class="linkUs guanzhuUS">
        关注微信广告内容
      </div>
    </div>
    <div class="goback links">
      <img class="icon" src="./images/aside1_03.jpg" alt="">
      <span class="txt">返回顶部</span>
    </div>
  </div>
  <div class="header">header</div>
  <div class="nav">nav</div>
  <div class="main">
    <div class="focus">focus</div>
    <div class="news">news</div>
  </div>
  <div class="fotter">
    fotter
  </div>
  <script>
    /*
      思路：
        1：首先先拿到news区域的距离头部的位置
        2：scrollY大于newsTop时候，显示返回顶部，否则就隐藏
        3：使用定时器结合scrollTo({top:scroll-20})的方式实现回滚丝滑效果
    */
    //需求：当滚动条滚动到news区域的时候，就显示返回顶部这个按钮 （起初的时候，是隐藏的状态）
    let goback = document.querySelector(".aside .goback")
    let news = document.querySelector(".main .news")
    //window滚动事件
    window.onscroll = function () {
      let newsTop = news.offsetTop //这是news距离上测的位置
      // console.log(newsTop); //691

      if (scrollY >= newsTop) { //如果滚动条大于news区域上测的位置，代表滚动到news区域，就显示返回顶部按钮
        goback.style.display = "block"
      } else {
        goback.style.display = "none"
      }
    }
    //返回顶部事件
    var timer;
    goback.onclick = function () {
      clearInterval(timer)
      timer = setInterval(function () {
        scrollTo({
          top: scrollY - 20,
        })
        if (scrollY <= 0) {
          clearInterval(timer)
        }
      }, 10)
    }
  </script>
</body>

</html>